From caac580ffd177a6eea0c246c4b91f74b6aa3f54f Mon Sep 17 00:00:00 2001 From: S Page Date: Fri, 12 Apr 2013 19:38:00 -0700 Subject: [PATCH] Clean up, comments, remove obsolete mw-ui-formlist * Remove obsolete ".mw-ui-formlist div label" selector, replaced by ".mw-ui-vform > div label". * Rename mw-ui-block-label to mw-ui-label since it doesn't impose block styling. * Remove overspecified ".mw-ui-vform > div label.mw-ui-checkbox-label" selectors, since the bare class applies the same styling. Also in the CSS for the vertical forms, * reduce the margin-bottom of #languagelinks * allow word wrap to break words in the errorbox (bug 46966). Change-Id: I03bdf3b1c50be732435e10193f004230a6a3bacf --- .../mediawiki.special.vforms.css | 3 +- .../mediawiki.ui/mediawiki.ui.default.css | 41 +++++-------------- .../mediawiki.ui/mediawiki.ui.vector.css | 41 +++++-------------- .../scss/components/default/_forms.scss | 29 ++++++------- 4 files changed, 39 insertions(+), 75 deletions(-) diff --git a/resources/mediawiki.special/mediawiki.special.vforms.css b/resources/mediawiki.special/mediawiki.special.vforms.css index db947a9cdb..d9b950b284 100644 --- a/resources/mediawiki.special/mediawiki.special.vforms.css +++ b/resources/mediawiki.special/mediawiki.special.vforms.css @@ -12,7 +12,7 @@ /* Reposition and resize language links, which appear on a per-wiki basis */ .mw-ui-container #languagelinks { - margin-bottom: 3em; + margin-bottom: 2em; font-size: 0.8em; } @@ -34,4 +34,5 @@ border: 1px solid #fac5c5; background-color: #fae3e3; text-shadow: 0 1px #fae3e3; + word-wrap: break-word; } diff --git a/resources/mediawiki.ui/mediawiki.ui.default.css b/resources/mediawiki.ui/mediawiki.ui.default.css index 0e0b40e8b4..2568f5a789 100644 --- a/resources/mediawiki.ui/mediawiki.ui.default.css +++ b/resources/mediawiki.ui/mediawiki.ui.default.css @@ -128,21 +128,21 @@ border-bottom-right-radius: 3px; } -/* line 12, sourcefiles/scss/components/default/_forms.scss */ +/* line 14, sourcefiles/scss/components/default/_forms.scss */ .mw-ui-vform { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; width: 290px; } -/* line 17, sourcefiles/scss/components/default/_forms.scss */ +/* line 19, sourcefiles/scss/components/default/_forms.scss */ .mw-ui-vform > div { display: block; margin: 0 0 15px 0; padding: 0; width: 100%; } -/* line 26, sourcefiles/scss/components/default/_forms.scss */ +/* line 28, sourcefiles/scss/components/default/_forms.scss */ .mw-ui-vform > div input, .mw-ui-vform > div label, .mw-ui-vform > div .mw-ui-button { @@ -153,7 +153,7 @@ margin: 0; width: 100%; } -/* line 33, sourcefiles/scss/components/default/_forms.scss */ +/* line 35, sourcefiles/scss/components/default/_forms.scss */ .mw-ui-vform > div input { outline: 0; border-style: solid; @@ -167,7 +167,7 @@ box-shadow: #4091ed 0px 0px 5px; border-color: #4091ed; } -/* line 37, sourcefiles/scss/components/default/_forms.scss */ +/* line 39, sourcefiles/scss/components/default/_forms.scss */ .mw-ui-vform > div label { font-size: 0.9em; color: #7d7d7d; @@ -179,26 +179,7 @@ .mw-ui-vform > div label * { font-weight: normal; } -/* line 44, sourcefiles/scss/components/default/_forms.scss */ -.mw-ui-vform > div label.mw-ui-checkbox-label, .mw-ui-vform > div label.mw-ui-radio-label { - margin-bottom: 0.5em; - cursor: pointer; - vertical-align: bottom; - line-height: normal; - font-weight: normal; -} -/* line 50, sourcefiles/scss/mixins/_forms.scss */ -.mw-ui-vform > div label.mw-ui-checkbox-label > input[type="checkbox"], .mw-ui-vform > div label.mw-ui-checkbox-label > input[type="radio"], .mw-ui-vform > div label.mw-ui-radio-label > input[type="checkbox"], .mw-ui-vform > div label.mw-ui-radio-label > input[type="radio"] { - width: auto; - height: auto; - margin: 0 0.1em 0em 0; - padding: 0; - border-style: solid; - border-width: 1px; - border-color: #c9c9c9; - cursor: pointer; -} -/* line 51, sourcefiles/scss/components/default/_forms.scss */ +/* line 49, sourcefiles/scss/components/default/_forms.scss */ .mw-ui-vform > div input[type="checkbox"], .mw-ui-vform > div input[type="radio"] { display: inline; @@ -208,7 +189,7 @@ width: auto; } -/* line 66, sourcefiles/scss/components/default/_forms.scss */ +/* line 65, sourcefiles/scss/components/default/_forms.scss */ .mw-ui-input { outline: 0; border-style: solid; @@ -223,17 +204,17 @@ border-color: #4091ed; } -/* line 71, sourcefiles/scss/components/default/_forms.scss */ -.mw-ui-block-label, .mw-ui-formlist div label { +/* line 72, sourcefiles/scss/components/default/_forms.scss */ +.mw-ui-label { font-size: 0.9em; color: #7d7d7d; } /* line 34, sourcefiles/scss/mixins/_forms.scss */ -.mw-ui-block-label *, .mw-ui-formlist div label * { +.mw-ui-label * { font-weight: normal; } -/* line 80, sourcefiles/scss/components/default/_forms.scss */ +/* line 81, sourcefiles/scss/components/default/_forms.scss */ .mw-ui-checkbox-label, .mw-ui-radio-label { margin-bottom: 0.5em; cursor: pointer; diff --git a/resources/mediawiki.ui/mediawiki.ui.vector.css b/resources/mediawiki.ui/mediawiki.ui.vector.css index b830649004..fd1ed473ce 100644 --- a/resources/mediawiki.ui/mediawiki.ui.vector.css +++ b/resources/mediawiki.ui/mediawiki.ui.vector.css @@ -257,21 +257,21 @@ text-shadow: none; } -/* line 12, sourcefiles/scss/components/default/_forms.scss */ +/* line 14, sourcefiles/scss/components/default/_forms.scss */ .mw-ui-vform { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; width: 290px; } -/* line 17, sourcefiles/scss/components/default/_forms.scss */ +/* line 19, sourcefiles/scss/components/default/_forms.scss */ .mw-ui-vform > div { display: block; margin: 0 0 15px 0; padding: 0; width: 100%; } -/* line 26, sourcefiles/scss/components/default/_forms.scss */ +/* line 28, sourcefiles/scss/components/default/_forms.scss */ .mw-ui-vform > div input, .mw-ui-vform > div label, .mw-ui-vform > div .mw-ui-button { @@ -282,7 +282,7 @@ margin: 0; width: 100%; } -/* line 33, sourcefiles/scss/components/default/_forms.scss */ +/* line 35, sourcefiles/scss/components/default/_forms.scss */ .mw-ui-vform > div input { outline: 0; border-style: solid; @@ -296,7 +296,7 @@ box-shadow: #4091ed 0px 0px 5px; border-color: #4091ed; } -/* line 37, sourcefiles/scss/components/default/_forms.scss */ +/* line 39, sourcefiles/scss/components/default/_forms.scss */ .mw-ui-vform > div label { font-size: 0.9em; color: #7d7d7d; @@ -308,26 +308,7 @@ .mw-ui-vform > div label * { font-weight: normal; } -/* line 44, sourcefiles/scss/components/default/_forms.scss */ -.mw-ui-vform > div label.mw-ui-checkbox-label, .mw-ui-vform > div label.mw-ui-radio-label { - margin-bottom: 0.5em; - cursor: pointer; - vertical-align: bottom; - line-height: normal; - font-weight: normal; -} -/* line 50, sourcefiles/scss/mixins/_forms.scss */ -.mw-ui-vform > div label.mw-ui-checkbox-label > input[type="checkbox"], .mw-ui-vform > div label.mw-ui-checkbox-label > input[type="radio"], .mw-ui-vform > div label.mw-ui-radio-label > input[type="checkbox"], .mw-ui-vform > div label.mw-ui-radio-label > input[type="radio"] { - width: auto; - height: auto; - margin: 0 0.1em 0em 0; - padding: 0; - border-style: solid; - border-width: 1px; - border-color: #c9c9c9; - cursor: pointer; -} -/* line 51, sourcefiles/scss/components/default/_forms.scss */ +/* line 49, sourcefiles/scss/components/default/_forms.scss */ .mw-ui-vform > div input[type="checkbox"], .mw-ui-vform > div input[type="radio"] { display: inline; @@ -337,7 +318,7 @@ width: auto; } -/* line 66, sourcefiles/scss/components/default/_forms.scss */ +/* line 65, sourcefiles/scss/components/default/_forms.scss */ .mw-ui-input { outline: 0; border-style: solid; @@ -352,17 +333,17 @@ border-color: #4091ed; } -/* line 71, sourcefiles/scss/components/default/_forms.scss */ -.mw-ui-block-label, .mw-ui-formlist div label { +/* line 72, sourcefiles/scss/components/default/_forms.scss */ +.mw-ui-label { font-size: 0.9em; color: #7d7d7d; } /* line 34, sourcefiles/scss/mixins/_forms.scss */ -.mw-ui-block-label *, .mw-ui-formlist div label * { +.mw-ui-label * { font-weight: normal; } -/* line 80, sourcefiles/scss/components/default/_forms.scss */ +/* line 81, sourcefiles/scss/components/default/_forms.scss */ .mw-ui-checkbox-label, .mw-ui-radio-label { margin-bottom: 0.5em; cursor: pointer; diff --git a/resources/mediawiki.ui/sourcefiles/scss/components/default/_forms.scss b/resources/mediawiki.ui/sourcefiles/scss/components/default/_forms.scss index 440669ecb0..86a891ae61 100644 --- a/resources/mediawiki.ui/sourcefiles/scss/components/default/_forms.scss +++ b/resources/mediawiki.ui/sourcefiles/scss/components/default/_forms.scss @@ -5,10 +5,12 @@ // -------------------------------------------------------------------------- // The FancyCaptcha image CAPTCHA used on WMF wikis drives the width of the -// 'vform' stacked div design, the form can't be narrower than this. +// 'VForm' design, the form can't be narrower than this. $captchaContainerWidth: 290px; $defaultFormWidth: $captchaContainerWidth; +// Style a compact vertical stacked form ("VForm") and the elements in divs +// within it. .mw-ui-vform { @include box-sizing(border-box); @@ -20,7 +22,7 @@ $defaultFormWidth: $captchaContainerWidth; padding: 0; width: 100%; - // MW currently doesn't use the type attribute everywhere on inputs + // MW currently doesn't use the type attribute everywhere on inputs. input, label, .mw-ui-button { @@ -40,13 +42,9 @@ $defaultFormWidth: $captchaContainerWidth; width: auto; margin: 0 0 0.2em 0; padding: 0; - - &.mw-ui-checkbox-label, &.mw-ui-radio-label { - @include agora-inline-label-styling; - } } - // Override the above styling just for checkboxes and radio inputs + // Override input styling just for checkboxes and radio inputs. input[type="checkbox"], input[type="radio"] { display: inline; @@ -61,22 +59,25 @@ $defaultFormWidth: $captchaContainerWidth; // Elements // -------------------------------------------------------------------------- -// Apply mw-ui-input to fields individually to style them -// You don't need to use this if is within a Agora form container +// Apply mw-ui-input to individual input fields to style them. +// You generally don't need to use this class if is within an Agora +// form container such as mw-ui-vform .mw-ui-input { @include agora-field-styling; // mixins/_forms.scss } -// Default label styling is mw-ui-block-label -.mw-ui-block-label, .mw-ui-formlist div label { +// Apply mw-ui-label to individual elements to style them. +// You generally don't need to use this class if